<template>
    <div class="main">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in slides" :key="index">
                <img class="img" :src="item.image"  @click="gohref(item.url)"/>
            </van-swipe-item>
        </van-swipe>
        <div class="cards">
            <div class="flexBox">
                <div class="flex33" v-for="(item,index) in categroy" :key="index">
                    <img class="img" :src="item.image"  @click="$router.push('/category?title='+item.name+'&id='+item.id)"/>
                </div>
            </div>
        </div>
        <img class="banner" :src="require('../../../assets/images/banner1.png')" />
        <list style="min-height:auto" :title="'新内容'" :list="course.new"></list>
        <list  style="min-height:auto" :title="'技术业务范围'" :list="course.list"></list>
        <links></links>
    </div>
</template>
<style lang="less" scoped>
.main {
    .my-swipe {
        width: 100%;
        img {
            display: block;
            width: 100%;
            max-width: 640px;
            // height: 200px;
        }
    }
    .cards {
        padding: 20 / 2px 30 / 2px;
        .flexBox {
            display: flex;
            flex-wrap: wrap;
            .flex33 {
                width:25%;
                padding: 15 / 2px;
                img {
                    display: block;
                    width: 100%;
                }
            }
        }
    }
    .banner {
        display: block;
        width: 100%;
    }
}
</style>
<script>
import list from '@/components/list/list'
import links from '@/components/foot/links'
export default {
    components: {
        list,
        links
    },
    data () {
        return {
            slides: [],
            categroy: [],
            course: []
        }
    },
    mounted () {
        this.getSlide()
        this.getCategory()
        this.getCourse()
    },
    methods: {
        gohref(url){
            if(url) location.href = url
        },
        getCourse () {
            this.$model.comm.getCourse().then(res => {
                this.course = res.data || []
            })
        },
        getCategory () {
            this.$model.comm.getCategory().then(res => {
                this.categroy = res.data || []
            })
        },
        getSlide () {
            this.$model.comm.getSlide().then(res => {
                this.slides = res.data || []
            })
        }
    }
};
</script>
